<template>
<el-affix :offset="0">
    <div id="header">
        
        <div class="box">
            <div class="leftLogo"><img src="../assets/logo.png" alt=""></div>
            <div class="tabUl">
                <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    background-color="#1E9493"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    @select="handleSelect"
                    :ellipsis = false
                >
                    <el-menu-item index="1" @click="to('/')" v-if="userType == ''">首页</el-menu-item>
                    <el-menu-item index="2-1" @click="to('CarbonTradingNull')" v-if="userType == ''">碳交易</el-menu-item>
                    <el-menu-item index="2" @click="to('CarbonTrading')" v-if="userType == 1 || userType == 2 || userType == 3">碳交易</el-menu-item>
                    <el-menu-item index="3" @click="to('EnterpriseCarbonE')" v-if="userType == 2">碳盘查</el-menu-item>
                    <el-menu-item index="3-1" @click="to('EnterpriseCarbonENull')" v-if="userType == ''">碳盘查</el-menu-item>
                    <el-menu-item index="4" @click="to('GovernmentMana')" v-if="userType == 1">数据监测</el-menu-item>
                    <el-menu-item index="4-1" @click="to('GovernmentManaNull')" v-if="userType == ''">数据监测</el-menu-item>
                    <el-menu-item index="5" @click="to('PersonalCarbonBenefits')" v-if="userType == 3">交通减排</el-menu-item>
                    <el-menu-item index="5-1" @click="to('PersonalCarbonBenefitsNull')" v-if="userType == ''">交通减排</el-menu-item>
                    <el-menu-item index="6" @click="to('AboutUs')">关于我们</el-menu-item>
                    <el-menu-item index="7" @click="to('policyList')">政策</el-menu-item>
                </el-menu>
            </div>
            <div class="person" @click="to('login')">
                <!-- <el-avatar :icon="UserFilled" style="margin-top:10px;float:left;margin-right:10px"/> -->
                <!-- <img src="../assets/logo.png" alt=""> -->
                <h5 v-if="userType == 1 || userType == 2 || userType == 3">退出</h5>
                <h5 v-else>登录</h5>
            </div>
            <div class="person"  v-if="userType == 1 || userType == 2 || userType == 3">
                <el-avatar :icon="UserFilled" style="margin-top:10px;float:left;margin-right:10px"/>
                <!-- <img src="../assets/logo.png" alt=""> -->
                <h5>admin</h5>
            </div>
            <div class="search">
                <el-input v-model="input2" class="w-50 m-2" placeholder="输入关键字搜索" :suffix-icon="Search" />
            </div>
        </div>
    </div>
    </el-affix>
</template>

<script>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { UserFilled } from '@element-plus/icons-vue'
import {mapState, mapMutations} from "vuex";
import types from "../store/mutation-types";
export default {
    computed: {
        // 使用对象展开运算符将此对象混入到外部对象中
        ...mapState({
            userType:"userType",
        }),
    },
    data(){
        return{
            tabList:[{}],
            activeIndex:1,
            input2:'',
            Search,
            UserFilled,
        }
    },
    methods:{
        handleSelect(key,keypath){
            console.log(key)
        },
        to(name){
            this.$router.push(name);
        },
    }

}
</script>

<style scoped>
#header{
    width: 100%;
    height: 90px;
    background: #1E9493;
}
.box{
    width: 1080px;
    margin:auto;
    padding-top: 10px;
    box-sizing: border-box;
}
.leftLogo{
    width:60px;
    float: left;
}
.leftLogo img{
    width: 100%;
}
.tabUl{
    float: left;
}
.search{
    float: right;
    margin-top:16px;
    margin-right:20px;
}
.person{
    float: right;
    margin-left:20px;
    cursor: pointer;
}
.person img{
    width: 40px;
    height:40px;
    margin-top:14px;
    border-radius: 50%;
    float: left;
    margin-right: 30px;
}
.person h5{
    float: left;
    color:#fff;
}
</style>